這個系列帶著各位通過Python的角度，開始認識JavaScript這個實用的程式語言。專為曾經學習Python或認識Python，並且想學習JavaScript的人們設計，將會頻繁的提到每一種函式或語法與Python相關之處，便於將理解的知識再次利用，從中學習！

本文章同步發布於 OTP Blog 個人部落格，歡迎前往閱讀唷！

前言

各位讀者大家好！這一篇文章將帶著大家認識JavaScript中輸出內容的方法，以及如何定義變數，並且介紹與Python之間的關聯與類似性，帶著各位從Python的角度認識JavaScript！

這篇文章會介紹JavaScript的 console.log 函式，以及定義變數的三種方法 let var const。若用Python角度來看的話將會是 print 以及定義變數(變數名稱 = 變數內容)。

開啟資料夾並新增檔案

首先，由於是第一篇實際操作的教學，先帶著大家在VSCode開啟一個資料夾，並且建立檔案。

第一步：創建一個資料夾並開啟

請先創建一個資料夾在自己想要的路徑中，並且資料夾內暫時不存放任何檔案。

接著開啟VSCode，到左上角工具欄中的「檔案」，並選擇開啟資料夾，亦可以通過先點按 Ctrl + k ，放開後再點按 Ctrl + o 進行操作。

並且將跳出選擇資料夾的視窗，請找到您剛剛創建的資料夾路徑，並且進行開啟。

這時您將來到類似於此的畫面，左上角檔案總管下的文字會是資料夾的名稱。

第二步：創建一個新檔案

將鼠標移動到資料夾名稱附近，您會看到出現了數個按鈕。

請點擊左側的新增檔案按鈕，並且將檔案命名為您想要的檔案名稱，並且副檔名須為 .js ，這邊由於是第二集的第一個程式，取名為 ep2-001.js。

當您在檔案總管區域點擊您的檔案時，您便會來到該檔案的編輯畫面。

以上是開啟資料夾與創建並開啟檔案的教學，接下來就要實際進行程式的學習囉！

輸出

首先要介紹的是在 JavaScript 中輸出的方法。想必非常多讀者都知道，在 Python 中最常見的輸出方法是 print() ，並且括號中的參數是輸出的內容，以及可以加入其他相關的設定。

例如：

print('輸出內容')
print(123)
print(True)

而在 JavaScript 中的輸出會使用到 console 這個語法，而其中最常用於除錯或基本輸出的便是 console.log() 這個函式。而這個函式與 print() 相同，括號內填入的是輸出的內容。接下來讓我們來實際操作吧！

在剛剛創建的檔案中，輸入以下程式碼

console.log(123);

可以發現在函式後面加上了一個分號，分號象徵著一行程式的結束，雖然若不加上也大多數情況內不會影響程式結果，但為了發生意料之外的錯誤，建議各位可以維持加上的習慣！

輸入後會發現檔案頁籤旁出現了一個白色圓圈，原先顯示的是一個叉叉，這代表了您所編輯的程式檔案尚未存檔。程式設計中，檔案未存檔會導致運行程式時，運行了前一次編輯且存檔的版本，而非最新的版本。因此每一次完成編輯後都應存檔後再運行，避免發生錯誤。

亦可以在檔案工具列中開啟自動儲存，避免忘記儲存的情形。

接著讓我們執行我們所編輯的程式碼。到工具列中的終端機頁籤，點按新增終端，來新增一個新的終端機供我們使用。

開啟終端機後，頁面下方會跳出一個小窗格以及一串文字，文字會是您開啟的資料夾路徑。並且該行文字後可以輸入指令，在終端機執行。

當我們要執行一個JavaScript程式碼，我們可以通過這串指令來通過Node環境進行執行。

node 檔案名稱

那我們就通過這個方式，來執行現在這個檔案吧！

node ep2-001.js

在終端機輸入後，點擊 Enter 便會執行。

我們可以發現，剛剛輸入在 console.log() 括號內的 123 成功被輸出！

若要輸出中文或英文文字等綜合的文字，您需要用單引號( ' )或雙引號( " )包住文字，這便是JavaScript中的字串資料型態，在後續資料型態的文章會再次細講。這樣的資料型態與包裹方式(' 或 " )在Python同樣存在。

而這樣的輸出，若是在網頁中，將會在「檢查」工具中的「主控台(Console)」出現，若在Chrome中，您可以通過點按 F12 開啟檢查頁面。這邊筆者以寫文用的網頁Console做示範。

可以看到下方有著一串串的文字，我們使用 console.log() 輸出的資料將會顯示在此。圖片中可以注意到，有著以叉叉的錯誤符號為前綴，以及以警示符號為前綴的訊息。

而這種訊息，可以通過 console.error() 和 console.warn() 輸出。但若是在 Node.js 環境並在終端機執行，並不會看到不一樣的結果，因此暫時不進行演示。

除此之外，也可以用 console.clear() 清空控制台的所有內容。

console 語法中，也有著許多其他的函式，但由於較不常用，因此將留到後續若有機會再行介紹。

變數

Python中，定義變數僅需要使用 變數名稱 = 變數資料 的方式定義。

例如：

x = 123
y = 'I am a string.'
z = "I am a string too."
n = False

而在JavaScript中，我們有三種方式能夠定義變數。

var 逐漸被棄用的定義方式

var 這個定義方式，在 ES6 發布並推出 let 之後，漸漸較少被使用。var 定義方式會讓變數在整個函式區域都可以被調用，並且被使用於變數較不會被重新賦值的情況。

雖然這幾種方法的用途與限制不同，但是定義的方式皆類似，例如 var 通過這樣的方式進行定義。

// 定義一個變數，名稱為otp，值為human字串
var otp = "human";
// 輸出otp這個變數，也就是human這個字串在主控台
console.log(otp);

可以發現這段程式碼中，第一和三行是對於程式的描述與補充，並且通過 // 起始。這樣的形式稱為註解，註解不會被執行，用於開發者開發時用於方便閱覽編輯程式碼。

建議各位在同一個資料夾再次創建一個新的檔案，命名為 ep2-002.js (第二集第二個程式)。並且將上述的程式碼貼於檔案內存檔，進行執行。

node ep2-002.js

將會出現這樣的結果。

let 主流的變數定義方式

let 這個定義方式在ES6被推出，並且逐漸被廣泛使用。let 的使用方法與 var 相同，適用範圍通常是變數會被重新定義時，並且使用 let 定義的變數不會存在於整個函式內。let 可以這樣使用。

// 定義一個變數，名稱為num，值為數字123
let num = 123;
// 輸出otp這個變數，也就是123這個數字在主控台
console.log(otp);

請將這段程式碼貼到剛剛 var 實作的下方，將兩份程式碼合併為一份檔案，即如此。

// 定義一個變數，名稱為otp，值為human字串
var otp = "human";
// 輸出otp這個變數，也就是human這個字串在主控台
console.log(otp);

// 定義一個變數，名稱為num，值為數字123
let num = 123;
// 輸出num這個變數，也就是123這個數字在主控台
console.log(num);

存檔並使用同樣的方法執行後，會產生此結果，可以發現兩個變數都順利的輸出！

const 無法被改變的變數

使用 const 定義的變數是無法被改變的，若改變會發生 TypeError: Assignment to constant variable. 的錯誤。變數可以通過此方式被定義。

// 定義一個變數，名稱為cow，值為布林值true
const cow = true;
// 輸出num這個變數，也就是123這個數字在主控台
console.log(cow);

同樣把這串程式貼於同個檔案下方，讓檔案長得像這樣。

// 定義一個變數，名稱為otp，值為human字串
var otp = "human";
// 輸出otp這個變數，也就是human這個字串在主控台
console.log(otp);

// 定義一個變數，名稱為num，值為數字123
let num = 123;
// 輸出num這個變數，也就是123這個數字在主控台
console.log(num);

// 定義一個變數，名稱為cow，值為布林值true
const cow = true;
// 輸出num這個變數，也就是123這個數字在主控台
console.log(cow);

存檔執行後會出現這樣的結果。

以上便是對於JavaScript中定義變數的方式介紹囉！

結語

這篇文章介紹了JavaScript中輸出內容的方式：console.log() 和 console.error() 以及 console.warn()，以及清空控制台的 console.clear()。

並且介紹了定義變數的方法 var let const ，期望對於各位的學習有幫助哦！這篇文章是第一篇開始正式指導各位學習並實作JavaScript的文章，若有任何建議也都歡迎留言，會斟酌採納唷！

謝謝您的閱讀，下篇文章再見囉～